<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>unitType</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../commons/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 加载bootstrap-select -->
    <link href="../commons/bootstrap-select-1.13.9-dist/css/bootstrap-select.min.css" rel="stylesheet">
    <!-- 加载bootstrap-treeview -->
    <link href="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../commons/css/currency.css">



    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">CIMS-校园即时通讯系统</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="unitIndex"> 首页</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"> 单位管理<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="unitTypeManager"> 单位类型</a></li>
                        <li><a href="unitManager"> 单位设置</a></li>
                    </ul>
                </li>
                <li><a href="userManager"> 用户管理</a></li>
            </ul>
            <ul class="nav navbar-nav" style="float: right">
                <li class=""><a id="loginUser_nav">管理员：</a></li>
                <li class=""><a id="logout_nav">注销</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="page-header">
        <h3 style="align-content: center">单位类型</h3>
    </div>


    <table class="table table-striped table-bordered" id="unitTypes-table">
        <thead>
        <tr>
            <th scope="col" class="col-lg-1">类型编号</th>
            <th scope="col" class="col-lg-3">类型名称</th>
            <th scope="col" class="col-lg-1">排序号</th>
            <th scope="col" class="col-lg-4">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>111</td>
            <td>院系</td>
            <td>1</td>
            <td class="conterner" align="center">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#exampleModal1">
                    <span class="glyphicon glyphicon-edit"></span>
                    修改
                </button>
                <button type="button" class="btn btn-danger btn-sm">
                    <span class="glyphicon glyphicon-remove"></span>
                    删除
                </button>
            </td>
        </tr>

        </tbody>
        <tfoot>
        <tr>
            <td colspan="6">
                <div class="btn-group btn-group-justified" role="group" aria-label="...">
                    <div class="col-lg-2" role="group">
                        <button type="button" class="btn btn-light page-link" data-toggle="modal" style="float: left"
                                data-target="#exampleModal">
                            <span class="glyphicon glyphicon-plus"></span>
                            新增
                        </button>
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">新增单位</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form>

                                            <div class="form-group row">
                                                <label for="inputPassword" class="col-sm-2 col-form-label">类型名称</label>
                                                <div class="col-sm-10">
                                                    <input type="password" class="form-control" id="inputPassword">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div role="group" style="float: right">
                        <span>总5条记录</span></div>
                </div>
            </td>
        </tr>
        </tfoot>
    </table>
    <!-- 新增模态框（Modal） -->
    <div class="modal fade" id="unitType_add_modal" tabindex="-1" role="dialog" aria-labelledby="unitType_add_modal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"> 新增单位类型</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" id="unitType_add_frm">
                        <div class="form-group">
                            <label for="unitTypeName_add_modal" class="col-sm-3 control-label"> 类型名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="unitTypeName" id="unitTypeName_add_modal"
                                       placeholder="请输入类型名称">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="unitTypeSortNum_add_modal" class="col-sm-3 control-label"> 排序号：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="unitTypeSortNum"
                                       id="unitTypeSortNum_add_modal"
                                       placeholder="请输入排序号">
                                <span class="help-block"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭</button>
                    <button type="button" class="btn btn-primary" id="unitType_save_btn"> 保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 修改模态框（Modal） -->
    <div class="modal fade" id="unitType_modify_modal" tabindex="-1" role="dialog"
         aria-labelledby="unitType_modify_modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"> 修改单位类型</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" id="unitType_modify_frm">
                        <div class="form-group">
                            <label for="unitTypeName_modify_modal" class="col-sm-3 control-label"> 类型名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="unitTypeName" id="unitTypeName_modify_modal"
                                       placeholder="请输入类型名称">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="unitTypeSortNum_modify_modal" class="col-sm-3 control-label"> 排序号：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="unitTypeSortNum"
                                       id="unitTypeSortNum_modify_modal"
                                       placeholder="请输入排序号">
                                <span class="help-block"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭</button>
                    <button type="button" class="btn btn-primary" id="unitType_modify_btn"> 保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="footer ">
        <div class="container">
            <div class="row footer-bottom">
                <ul class="list-inline text-center">
                    <li> Campus Instant Messaging System @2020 杭州职业技术学院 软件技术专业</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../commons/js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../commons/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.js"></script>
<script src="../commons/bootstrap-select-1.13.9-dist/js/bootstrap-select.min.js"></script>
<script src="../commons/js/login.js"></script>

<script type="text/javascript">
    $(function () {
        to_page();
    });

    function to_page() {
        $.ajax({
            url: "unitTypes",
            type: "GET",
            dataType: "json",
            success: function (result) {
                if (result.code == 100) {
                    //查询成功，解析并显示数据
                    //1、显示单位类型信息
                    build_unitTypes_table(result);
                }
            },
            error: function () {
                $("#unitTypes-table tbody").empty();
                $("#unitTypes-table tfoot").empty();
                $("#unitTypes-table tbody").append("<tr><td colspan='4'>查询出错，请稍后再试！</td></tr>");
            }
        });
    }

    function build_unitTypes_table(result) {
        $("#unitTypes-table tbody").empty();
        var unitTypes = result.extend.unitTypes;
        $.each(unitTypes, function (index, unitType) {
            var unitTypeIdTd = $("<td></td>").addClass("tdCenter").append(unitType.id);
            var unitTypeNameTd = $("<td></td>").append(unitType.unitTypeName);
            var unitTypeSortNumTd = $("<td></td>").addClass("tdCenter").append(unitType.unitTypeSortNum);
            var editBtn = $("<button></button>").addClass("btn btn-sm btn-primary edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-edit")).append(" 修改");
            editBtn.attr({"edit-id": unitType.id});
            var delBtn = $("<button></button>").addClass("btn btn-sm btn-danger delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-remove")).append(" 删除");
            delBtn.attr("delete-id", unitType.id);
            var unitTypeOperationDiv = $("<div></div>").addClass("input-group").append($("<span></span>").addClass("input-group-btn").append(editBtn).append(delBtn));
            var unitTypeOperationTd = $("<td></td>").addClass("tdCenter").append(unitTypeOperationDiv);

            $("<tr></tr>").append(unitTypeIdTd)
                .append(unitTypeNameTd)
                .append(unitTypeSortNumTd)
                .append(unitTypeOperationTd)
                .appendTo("#unitTypes-table tbody");
        });

        $("#unitTypes-table tfoot").empty();
        var operatorUl = $("<ul></ul>").addClass("pagination pull-left").attr("style", "margin: 0 0 0 0;");
        var addLi = $("<li></li>").append($("<a></a>").attr("id", "unitType_add_btn").append($("<span></span>").addClass("glyphicon glyphicon-plus").append("新增")));
        operatorUl.append(addLi);

        var pageInfoUl = $("<ul></ul>").addClass("pagination pull-right").attr("style", "margin: 0 0 0 0;");
        var pageInfoLi = $("<li></li>").addClass("disabled").append($("<a></a>").attr("style", "border: 0px;").append("总 "
            + unitTypes.length + " 条记录"));
        pageInfoUl.append(pageInfoLi);

        var pageNavTd = $("<td></td>").addClass("text-center")
            .attr({"colspan": 4}).append(operatorUl).append(pageInfoUl);
        $("<tr></tr>").append(pageNavTd)
            .appendTo("#unitTypes-table tfoot");
    }

    $(document).on("click", ".delete_btn", function () {
        var unitTypeName = $(this).parents("tr").find("td:eq(1)").text();
        if (confirm("确认删除[ " + unitTypeName + " ]吗？")) {
            $.ajax({
                url: "unitType/" + $(this).attr("delete-id"),
                type: "DELETE",
                dataType: "json",
                success: function (result) {
                    alert(result.msg);
                    if (result.code = 100) {
                        //删除成功
                        //刷新单位类型列表显示
                        to_page();
                    }
                }
            });
        }
    });

    $(document).on("click", "#unitType_add_btn", function () {
        $("#unitType_add_modal").modal({
            "backdrop": "static"
        });
    });

    $(document).on('hidden.bs.modal', '.modal', function () {
        $("#unitType_add_modal form")[0].reset();
        $("#unitType_add_modal form").find("*").removeClass("has-error has-success");
        $("#unitType_add_modal form").find(".help-block").text("");

        $("#unitType_modify_modal form")[0].reset();
        $("#unitType_modify_modal form").find("*").removeClass("has-error has-success");
        $("#unitType_modify_modal form").find(".help-block").text("");
    });

    $("#unitType_save_btn").click(function () {
        //数据校验

        //新增单位类型的异步请求
        $.ajax({
            url: "unitType",
            data: $("#unitType_add_frm").serialize(),
            type: "post",
            dataType: "json",
            success: function (result) {
                if (result.code == 100) {
                    //添加成功，刷新所有单位类型信息
                    $("#unitType_add_modal").modal('hide');
                    alert("单位类型信息添加成功！");
                    to_page();
                }
            }
        });
    });

    $(document).on("click", ".edit_btn", function () {
        $.ajax({
            url: "unitType",
            data: {"id": $(this).attr("edit-id")},
            type: "GET",
            dataType: "json",
            success: function (result) {
                if (result.code == 100) {
                    $("#unitTypeName_modify_modal").val(result.extend.unitType.unitTypeName);
                    $("#unitTypeSortNum_modify_modal").val(result.extend.unitType.unitTypeSortNum);
                }
            }
        });

        $("#unitType_modify_btn").attr("edit-id", $(this).attr("edit-id"));
        $("#unitType_modify_modal").modal({
            "backdrop": "static"
        });
    });

    $("#unitType_modify_btn").click(function () {
        //数据校验

        //新增单位类型的异步请求
        $.ajax({
            url: "unitType/" + $(this).attr("edit-id"),
            data: $("#unitType_modify_frm").serialize(),
            type: "put",
            dataType: "json",
            success: function (result) {
                if (result.code == 100) {
                    //修改成功，刷新所有地域信息
                    $("#unitType_modify_modal").modal('hide');
                    alert("单位类型信息修改成功！");
                    to_page();
                }
            }
        });
    });
</script>
</body>
</html>
